<script setup lang="ts">
      import { Session } from '@/utils/storage';
      import {ref,onMounted,reactive,toRefs, nextTick} from 'vue';
      import request from "@/utils/request";
       import {notify} from '@/utils/element';
       import { uploadImg } from '@/api/common/media';

      import base from "@/utils/base";

      
      const state=reactive({
                ruleForm: {},
                flag: '',
                                                                                                                                                                                                                                    yonghuyonghuxingbieOptions: [],
                                                                                })
   
      const { ruleForm,flag
                                                                                                                                                                                                                                   , yonghuyonghuxingbieOptions
                                                                                 } = {...toRefs(state)};
     
      const tableName=Session.get("tableName");
     
      nextTick(()=>{

      state.flag = tableName;
     request({
        url:`${tableName}/session`,
        method:'GET'
      }).then((data) => { 
            state.ruleForm = data.data;
    });
   

      })





                                                                                                                                                                                                                                                      state.yonghuyonghuxingbieOptions = "男,女".split(',')
                      
                                                                              

    function onUpdateHandler(){


                                                                                                                if ((!state.ruleForm.yonghuzhanghao) && 'yonghu' == state.flag) {

                        notify('用户账号不能为空',{type:'error'})
                        return
                    }
                                                                if ((!state.ruleForm.mima) && 'yonghu' == state.flag) {

                        notify('密码不能为空',{type:'error'})
                        return
                    }
                                                                if ((!state.ruleForm.lianxifangshi) && 'yonghu' == state.flag) {

                        notify('联系方式不能为空',{type:'error'})
                        return
                    }
                                                                                            if ((!state.ruleForm.yonghuxingming) && 'yonghu' == state.flag) {

                        notify('用户姓名不能为空',{type:'error'})
                        return
                    }
                                    
           request({
             url:`${tableName}/update`,
             method:'post',
             data:state.ruleForm
           }).then((data)=>{
            notify('修改信息成功',{type:'success'})
           })



    }




</script>
<template>
    <div>
        <el-form
                class="detail-form-content"
                ref="RefForm"
                :model="ruleForm"
                label-width="80px"
        >
            <el-row>

                                                                                                                                                                            <el-col :span="12">
                        <el-form-item v-if="flag=='yonghu'" label="用户账号" prop="yonghuzhanghao">
                                                            <el-input v-model="ruleForm.yonghuzhanghao" placeholder="用户账号" clearable></el-input>
                                </el-form-item>
                                </el-col>
                                                                                                                        <el-col :span="12">
                        <el-form-item v-if="flag=='yonghu'" label="密码" prop="mima">
                                                            <el-input v-model="ruleForm.mima" placeholder="密码" clearable></el-input>
                                </el-form-item>
                                </el-col>
                                                                                                                        <el-col :span="12">
                        <el-form-item v-if="flag=='yonghu'" label="联系方式" prop="lianxifangshi">
                                                            <el-input v-model="ruleForm.lianxifangshi" placeholder="联系方式" clearable></el-input>
                                </el-form-item>
                                </el-col>
                                                                                                                        <el-col :span="12">
                        <el-form-item v-if="flag=='yonghu'" label="用户性别" prop="yonghuxingbie">
                                                            <el-select v-model="ruleForm.yonghuxingbie" placeholder="请选择用户性别">
                                    <el-option
                                            v-for="(item,index) in yonghuyonghuxingbieOptions"
                                            v-bind:key="index"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            </el-col>
                                                                                                                        <el-col :span="12">
                        <el-form-item v-if="flag=='yonghu'" label="用户姓名" prop="yonghuxingming">
                                                            <el-input v-model="ruleForm.yonghuxingming" placeholder="用户姓名" clearable></el-input>
                                </el-form-item>
                                </el-col>
                                                                                                        <el-form-item v-if="flag=='users'" label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"
                              placeholder="用户名"></el-input>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item>
                        <el-button type="primary" @click="onUpdateHandler">修 改</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>


<style lang="scss" scoped>
    .avatar-uploader{
        border:1px solid #e4e6e9
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>
